<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>

  <body>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
        }
      }
    </script>

    <!--
Modal component with customizable slots and CSS transitions.
-->

    <script type="module">
      import Modal from "./Modal.js";
      import { createApp, ref } from "vue";

      createApp({
        components: {
          Modal,
        },
        setup() {
          const showModal = ref(false);

          return {
            showModal,
          };
        },
      }).mount("#app");
    </script>

    <div id="app">
      <button id="show-modal" @click="showModal = true">Show Modal</button>

      <teleport to="body">
        <!-- use the modal component, pass in the prop -->
        <modal :show="showModal" @close="showModal = false">
          <template #header>
            <h3>custom header</h3>
          </template>
        </modal>
      </teleport>
    </div>
  </body>
</html>
